<template>

  <el-container class="el-container list" v-loading="loading" style="height: 100%;">
    <el-header height="160px">
        <div class="logoImg">
            <img v-if="logo" :src="logo" class="logo_picture">
        </div>
        <div class="logo_navbar">
            <datav-navbar />
        </div>
    </el-header>
    <el-container class="container-body">

        <el-aside width="300px">
            <el-col :span="24" :xs="24">
            <div style="text-align:center;margin-top:30px;"><h3 style="color: #FFFFFF">大屏分类</h3></div>
            <div style="margin-left:20px; margin-top:50px;">
            <el-tree
                :data="classificationOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                ref="tree"
                default-expand-all
                @node-click="handleNodeClick"
            />
            </div>
        </el-col>
        </el-aside>

        <el-container>
        <el-main>
            <el-col :span="24" :xs="24">
        
                <div class="queryForm">
                <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                    <el-form-item label="名称" prop="name">
                    <el-input
                        v-model="queryParams.screenName"
                        placeholder="请输入名称"
                        clearable
                        size="small"
                    />
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                </div>

                <div class="content">
                <div class="content__item content__item--add" @click="add">
                    <div>
                    <i class="el-icon-plus"></i>
                    <p>新建大屏</p>
                    </div>
                </div>
                <div class="content__item" v-for="(item, index) in screenList" :key="index">
                    <div class="content__info">
                    <img
                        :src="item.capturePath != null ? basePath + item.capturePath : 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
                        class="image"
                        @click="view(item.screenId)"
                    />
                    <!-- <div class="content__menu">
                        <div class="content__btn">编辑</div>
                    </div> -->
                    </div>
                    <div class="content__main">
                    <span class="content__name" :title="item.screenName" style="cursor: default">{{item.screenName}}</span>
                    <div class="content__menulist">
                        <div class="content__view">
                        <i
                            class="el-tooltip el-icon-edit"
                            aria-describedby="el-tooltip-4499"
                            tabindex="0"
                            @click="edit(item.screenId)"
                            v-hasPermi="['datav:screen:edit']"
                            style="cursor: pointer"
                        ></i>
                        <i
                            class="el-tooltip el-icon-delete"
                            aria-describedby="el-tooltip-8070"
                            tabindex="0"
                            @click="del(item.screenId)"
                            v-hasPermi="['datav:screen:remove']"
                            style="cursor: pointer"
                        ></i>
                        <i
                            class="el-tooltip el-icon-document-copy"
                            aria-describedby="el-tooltip-1883"
                            tabindex="0"
                            @click="copy(item.screenId)"
                            v-hasPermi="['datav:screen:copyApply']"
                            style="cursor: pointer"
                        ></i>
                        <i
                            class="el-tooltip el-icon-share"
                            aria-describedby="el-tooltip-1883"
                            tabindex="0"
                            @click="share(item.screenId,item.screenName)"
                            v-hasPermi="['datav:screen:share']"
                            style="cursor: pointer"
                        ></i>
                        <i
                            class="el-tooltip el-icon-download"
                            aria-describedby="el-tooltip-2809"
                            tabindex="0"
                            @click="download(item.screenId)"
                            v-hasPermi="['datav:screen:download']"
                            style="cursor: pointer"
                        ></i>
                        </div>
                    </div>
                    </div>
                </div>
                </div>

                <div class="page">
                <!-- <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15, 20, 25]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination> -->
                <pagination
                    v-show="total>0"
                    :total="total"
                    layout="total, prev, pager, next,jumper"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
                </div>

            </el-col>

            <!-- 数据大屏分享对话框 -->
            <el-dialog :title="`分享“ ${shareScreenName} ”模板`" :visible.sync="open" width="600px" :close-on-click-modal="false" append-to-body>
  
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                
                <el-row>
                  <el-col :span="24">
                      <el-form-item label="分享类型" prop="shareType">
                        <el-select v-model="form.shareType" placeholder="请选择" class="effectSpan">
                          <el-option label="分享模板" value="template"></el-option>
                          <el-option label="分享页面" value="page"></el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                </el-row>
                
                <el-row>
                <el-col :span="24" v-if="form.shareType == 'template' " >
                    <el-form-item label="接收人" prop="userList">
                    <el-select v-model="form.userList" multiple filterable placeholder="请选择" style="width:480px">
                        <el-option
                        v-for="item in users.slice((currentPage-1) * pageSize, currentPage * pageSize)"
                        :key="item.userId"
                        :label="item.nickName"
                        :value="item.userName">
                        </el-option>
                        <div class="text-center" style="position: sticky;background: #fff;height:30px;top:0;z-index:1">
                        
                        <el-pagination  @current-change="handleCurrentChange" class="share"
                            :current-page="currentPage"
                            :page-size='pageSize'
                            layout="total,prev,pager,next"
                            :pager-count="5"
                            :total="users.length">
                        </el-pagination>
                        
                        </div>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.shareType == 'template' ">
                    <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24" v-if="form.shareType == 'page' ">
                    <el-form-item label="提取码" prop="number">
                      <el-input v-model="form.number" class="effectSpan"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="form.shareType == 'page' ">
                    <el-form-item label="有效期" prop="time">
                      <el-radio-group v-model="form.time">
                        <el-radio :label="1" class="effectSpan">1天</el-radio>
                        <el-radio :label="7" class="effectSpan">7天</el-radio>
                        <el-radio :label="30" class="effectSpan">30天</el-radio>
                        <el-radio :label="10*365" class="effectSpan">10年</el-radio>
                      </el-radio-group>
                    </el-form-item>
                </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
            </el-dialog>

            <!-- 数据大屏分享页面对话框 -->
            <el-dialog :title="`分享“ ${shareScreenName} ”模板`" :visible.sync="shareFlag" width="600px" :close-on-click-modal="false" append-to-body>
              <el-form  ref="form" :model="form" label-width="80px">

                <el-col :span="24">
                    <el-form-item label="链接">
                      <el-input v-model="form.link" class="effectSpan"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="提取码">
                      <el-input v-model="form.number" class="effectSpan"></el-input>
                    </el-form-item>
                </el-col>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" 
                  v-clipboard:copy="shareLink" 
                  v-clipboard:success="onCopy" 
                  v-clipboard:error="onError">复制链接及提取码</el-button>
                <el-button @click="closePage">关闭</el-button>
              </div>
            </el-dialog>


            <!-- 创建数据大屏页面对话框 -->
            <el-dialog title="选择模板" v-if="templateFlag" :visible.sync="templateFlag" :close-on-click-modal="false" width="800px" append-to-body>
              <el-form  ref="form" :model="form" label-width="80px">

                <carousel :templateItems="templateItems" :templateTotal="templateTotal" @create-screen="createScreen"></carousel>

                </div>
              </el-form>
              <div slot="footer" class="dialog-footer">
                
                <el-button @click="closeTemplate">关闭</el-button>
              </div>
            </el-dialog>

        </el-main>
        <el-footer></el-footer>
        </el-container>
    
      
    </el-container>
  </el-container>

  
</template>

<script>

import logoImg from '@/assets/image/logo5.png'
import DatavNavbar from '@/layout/components/DatavNavbar'
import { listScreen, delScreen, copyApply ,getUserList,shareScreen,sharePage, getTemplateList} from "@/api/tool/datav/screenApi";
import { treeselect } from "@/api/tool/datav/classification";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { codeGen } from './codegen/codegen'
import CHAT from "./util/netty";
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2'
import Carousel from '@/views/tool/datav/Carousel'
Vue.use(CHAT);
Vue.use(VueClipboard);

export default {
  components: {
    DatavNavbar,
    Carousel  
  },
  data() {
    return {
      //服务器根路径
      basePath: process.env.VUE_APP_BASE_API,
      logo: logoImg,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 数据大屏表格数据
      screenList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9,
        screenName: undefined,
        isPublic: undefined,
        isTemplate: undefined,
        belongto: undefined,
        status: undefined,
      },
      //currentPage: 3,
      // 数据大屏模板分类树选项
      classificationOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userList: [
          { required: true, message: "接收人不能为空", trigger: "blur" }
        ],
        shareType: [
          { required: true, message: "分享类型不能为空", trigger: "blur" }
        ],
        
        time: [
          { required: true, message: "有效期不能为空", trigger: "blur" }
        ],
      },
      users:[],
      shareScreenId:'',
      shareScreenName: '',
      currentPage: 1,// 当前页码
      pageSize:10,
      shareFlag: false,
      shareLink: '',
      templateFlag: false,
      templateItems: [],
      templateTotal:null,//模板数量
    };
  },
  created() {
    this.getTreeselect();
    this.getList();
  },
  methods: {
    /** 查询数据大屏列表 */
    getList() {
      this.loading = true;
      listScreen(this.queryParams).then(response => {
        this.screenList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.screenName = '';
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 大屏模板添加 */
    add() {
      //直接跳转
      //this.$router.push("/tool/datav/datavDraw");
      //this.$router.push({path: '/tool/datav/datavDraw', query: {screenId: ''}});
      //先请求再把数据传给子组件
      let templateQuery = {pageNum:1,pageSize:3}
      getTemplateList(templateQuery).then(response => {
        let arr = [{screenId: '', screenName: '空白大屏', capturePath: ''}];
        for (const iterator of response.rows) {
          arr.push(iterator);
        }
        this.templateTotal = response.total
        // console.log(arr);
        this.templateItems = arr;
        this.templateFlag = true;
      });
    },
    /** 创建大屏*/
    createScreen(temlateId) {
      this.templateFlag = false;
      this.$router.push({path: '/tool/datav/datavDraw', query: {screenId: '', temlateId: temlateId}});
    },
    view(id) {
      //this.$router.push({path: "/tool/datav/datavRelease", query: {screenId: id}});
      const viewRuter = this.$router.resolve({path: "/tool/datav/datavRelease", query: {screenId: id}})
      window.open(viewRuter.href,'_blank')
    },
    edit(id) {
      this.$router.push({path: '/tool/datav/datavDraw', query: {screenId: id}});
    },
    del(id) {
      this.$confirm('是否确认删除大屏数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delScreen(id);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    copy(id) {
        this.$confirm('是否确认复制大屏数据项?', "提醒", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return copyApply(id);
        }).then(() => {
          this.getList();
          this.msgSuccess("复制成功");
        }).catch(function() {});
    },
    share(id,name) {
      this.form = {};
      getUserList().then(response => {
        // console.log( response.data)
         this.users = response.data;
        });
      this.open = true;
      this.shareScreenId = id;
      this.shareScreenName = name;
    },
    download(id) {
      //alert("下载" + id);
      codeGen(id);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    /** 查询下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.classificationOptions = response.data;
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (data.id == '1') {
        this.queryParams.belongto = '';
      } else {
        this.queryParams.belongto = data.id;
      }
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    //确认分享
    submitForm: function() {

      this.$refs["form"].validate(valid => {
        if (valid) {

          this.form.screenId = this.shareScreenId;

          if(this.form.shareType == 'template'){
              shareScreen(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("分享成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });  
          }else{
            
            this.form.screenName = this.shareScreenName;
            sharePage(this.form).then(response => {
              if (response.code === 200) {
                // console.log(window.location.port)
                this.form.link =  "http://"+window.location.host+"/tool/datav/datavRelease?screenId="+response.screenId+"&tokenId="+response.id
                this.shareLink = '链接： ' + this.form.link +
                                  '\n提取码： ' + this.form.number;
                this.shareFlag = true;
                this.open = false;
                
              } else {
                this.msgError(response.msg);
              }
            });  
          }

          
        }
      });
    },
    closePage(){
      this.shareFlag = false;
    },
    closeTemplate() {
      this.templateFlag = false;
    },
    //翻页
    handleCurrentChange(val) {     
        this.currentPage = val;
    },
    onCopy(){
      this.msgSuccess("复制成功");
    },
    onError(){
      this.msgError("复制失败");
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.el-header {
    background-color:  rgba(255, 255, 255,0);
    color: #333;
    text-align: center;
    background-image: url("../../../assets/image/backAnimation1.gif");
}

.el-footer {
    background-color:  rgba(255, 255, 255,0);
    color: #333;
    text-align: center;
    line-height: 60px;
  }

aside {
    background: rgba(255, 255, 255,0);
}
/deep/ .el-tree {
    position: relative;
    cursor: default;
    background: rgba(255, 255, 255, 0);
    color: #606266;
}

/deep/ .el-tree-node__content {
    display: flex;
    align-items: center;
    height: 50px;
    cursor: pointer;
    background-color: transparent;
}

/deep/ .el-tree-node__label {
    font-size: 16px;
    color: #FFFFFF;
}
/deep/ .effectSpan .el-input__inner{
  color: #FFFFFF;
}

/deep/ .el-tree-node:focus>.el-tree-node__content {
    background-image: linear-gradient(270deg, rgba(13,145,255,0.00) 0%, #0D91FF 100%);
    border-radius: 4px;
    background-color: transparent;
}

/deep/ .el-tree-node__content:hover {
    background-image: linear-gradient(270deg, rgba(200, 230, 255, 0) 0%, #0D91FF 100%);
    border-radius: 4px;
}

/deep/ .el-form-item--medium .el-form-item__label {
    line-height: 36px;
    color: #FFFFFF;
}

/deep/ .el-pagination .el-select .el-input .el-input__inner {
    padding-right: 25px;
    border-radius: 3px;
    background-color: #ff000000;
}
/deep/ .el-pagination__jump .el-input__inner{
  color:#fff;
  background-color: transparent;
}
/deep/ .el-pagination__sizes .el-input__inner{
  color:#fff;
  background-color: transparent;
}
/deep/ .el-pagination .btn-prev, .el-pagination .btn-next {
  color:#fff;
  background-color: transparent;
}

/deep/ .el-pagination button:disabled{
  background-color: transparent;
}
/deep/.el-pagination .el-pagination__total{
  color:#fff
}
/deep/.el-pagination{
  color:#fff
}
/deep/ .el-pagination__jump{
  color:#fff
}
/deep/ .el-input--medium .el-input__inner {
    height: 36px;
    line-height: 36px;
    background-color: #ffffff00;
}

/deep/ .pagination-container {
    background: #fff0;
    padding: 32px 16px;
    left: 15%;
}

/* 分享分页样式 */
/deep/ .share.el-pagination .el-pagination__total {
    margin-right: 10px;
    font-weight: normal;
    color: #606266;
}
/deep/ .share.el-pagination .btn-prev:disabled, .el-pagination .btn-next:disabled {
    color: #C0C4CC;
    background-color: #f4f4f5;
}
/deep/ .share.el-pagination .btn-prev,.share.el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
/deep/ .share.el-pagination button:disabled {
    color: #C0C4CC;
    background-color: #fff;
    cursor: not-allowed;
}
/deep/ .share.el-pagination .btn-next, .el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
/deep/ .share.el-pagination .el-pager li:not(.disabled).active {
    background-color: #1890ff;
    color: #fff;
}
/deep/ .share.el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}

/deep/ .el-dialog {
    background: #172b47;
}

/deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #ffffff;
}

.logoImg {
    margin-left: 40px;
    width: 320px;
    height: 80px;
    float: left;
}

.logo_navbar {
    margin-top: 12px;
}

.logo_picture {
    margin-top: 12px;
    width: 380px;
}

.container-body {
    height: 776px;
    background-image: url("../../../assets/image/img_bg.png");
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.list .el-menu {
  border-right: none;
}
.list .el-menu.el-menu--horizontal {
  border-color: #212528;
  border-width: 2px;
}
.list .page {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.list .el-menu i {
  margin-right: 5px;
}
.list .content {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.list .content,
.list .content__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.list .content__item {
  position: relative;
  margin: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 258px;
  height: 184px;
  border: 1px solid #3a4659;
  overflow: hidden;
}
.list .content__item:hover {
  -webkit-box-shadow: 0 0 20px 0 #000;
  box-shadow: 0 0 20px 0 #000;
  border: 1px solid #00baff;
}
.list .content__item--add {
  height: 184px;
  width: 258px;
  border: 1px solid #00baff;
  font-size: 14px;
  color: #8eeeff;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0, rgba(0, 222, 255, 0.39)),
    to(rgba(0, 174, 255, 0.19))
  );
  background-image: linear-gradient(
    -90deg,
    rgba(0, 222, 255, 0.39),
    rgba(0, 174, 255, 0.19)
  );
  -webkit-box-shadow: 0 0 10px 0 rgba(55, 224, 255, 0.3);
  box-shadow: 0 0 10px 0 rgba(55, 224, 255, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}
.list .content__item--add i {
  display: block;
  padding-bottom: 10px;
  text-align: center;
  font-size: 19px;
  color: rgb(255, 255, 255);
}
.list .content__item--add p {
  letter-spacing: 2px;
  color: rgb(255, 255, 255);
}
.list .content__main {
  font-size: 12px;
  width: 100%;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: #1d262e;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  color: #bcc9d4;
}
.list .content__main a {
  color: #bcc9d4;
}
.list .content__main i {
  margin-right: 1px;
}
.list .content__view {
  margin-right: 2px;
}
.list .content__menulist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.list .content__menulist i {
  margin-right: 10px;
}
.list .content__status--active {
  color: #fff;
}
.list .content__name {
  width: 100px;
  padding: 0 5px;
  line-height: 28px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid transparent;
}
.list .content__info {
  position: relative;
  height: calc(100% - 36px);
}
.list .content__menu {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 38, 46, 0.8);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.list .content__btn {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  line-height: 32px;
  padding: 0 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  text-align: center;
  font-size: 14px;
  background-image: linear-gradient(-225deg, #00d3f1, #12b3ff);
  color: #293f52;
  border: none;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  cursor: pointer;
}
.list .content__info img {
  width: 100%;
  height: 100%;
}

.queryForm {
    padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
}
.effectSpan{
  color: #fff
}

.el-aside::-webkit-scrollbar { width: 0 !important }
.el-aside { -ms-overflow-style: none;scrollbar-color: transparent transparent; }
.el-aside { overflow: -moz-scrollbars-none; }

.el-main::-webkit-scrollbar { width: 0 !important }
.el-main { -ms-overflow-style: none; scrollbar-color: transparent transparent;}
.el-main { overflow: -moz-scrollbars-none; }

</style>